<script setup lang='ts'>
import { useUserStore } from '@fl/store/modules/user'

import UserInfo from './user-info.vue'

const { push } = useRouter()
function goToRegister() {
    push('/register')
}

function goToLogin() {
    push('/login')
}

const userStore = useUserStore()

const userIsLogin = computed(() => {
    return Boolean(userStore.userInfo)
})
</script>

<template>
    <div class="space-x-8 flex flex-none h-full items-center">
        <UserInfo v-if="userIsLogin"
                  :height="80"
        />

        <template v-else>
            <div class="px-16 py-10 bg-transparent rd-4 font-400 cursor-pointer"
                 @click="goToLogin"
            >
                登录
            </div>

            <div class="px-16 bg-red rd-4 text-white font-500 leading-40 h-40 cursor-pointer"
                 @click="goToRegister"
            >
                立即注册
            </div>
        </template>
    </div>
</template>
